<script setup lang="ts">

</script>

<template>
  <div class="wrap">
    <div class="container">
      <div class="item">
        <img src="https://loremflickr.com/300/150?random=1" alt="">
        <h4>Card Title</h4>
        <p>CSS Grid is well equipped to help us make this tile layout even better.</p>
      </div>
      <div class="item">
        <img src="https://loremflickr.com/300/150?random=2" alt="">
        <h4>Card Title</h4>
        <p>CSS Grid is well equipped to help us make this tile layout even better.</p>
      </div>
      <div class="item">
        <img src="https://loremflickr.com/300/150?random=3" alt="">
        <h4>Card Title</h4>
        <p>CSS Grid is well equipped to help us make this tile layout even better.</p>
      </div>
      <div class="item">
        <img src="https://loremflickr.com/300/150?random=4" alt="">
        <h4>Card Title</h4>
        <p>CSS Grid is well equipped to help us make this tile layout even better.</p>
      </div>
      <div class="item">
        <img src="https://loremflickr.com/300/150?random=5" alt="">
        <h4>Card Title</h4>
        <p>CSS Grid is well equipped to help us make this tile layout even better.</p>
      </div>
      <div class="item">
        <img src="https://loremflickr.com/300/150?random=6" alt="">
        <h4>Card Title</h4>
        <p>CSS Grid is well equipped to help us make this tile layout even better.</p>
      </div>
      <div class="item">
        <img src="https://loremflickr.com/300/150?random=7" alt="">
        <h4>Card Title</h4>
        <p>CSS Grid is well equipped to help us make this tile layout even better.</p>
      </div>
      <div class="item">
        <img src="https://loremflickr.com/300/150?random=8" alt="">
        <h4>Card Title</h4>
        <p>CSS Grid is well equipped to help us make this tile layout even better.</p>
      </div>
      <div class="item">
        <img src="https://loremflickr.com/300/150?random=9" alt="">
        <h4>Card Title</h4>
        <p>CSS Grid is well equipped to help us make this tile layout even better.</p>
      </div>
      <div class="item">
        <img src="https://loremflickr.com/300/150?random=10" alt="">
        <h4>Card Title</h4>
        <p>CSS Grid is well equipped to help us make this tile layout even better.</p>
      </div>
      <div class="item">
        <img src="https://loremflickr.com/300/150?random=11" alt="">
        <h4>Card Title</h4>
        <p>CSS Grid is well equipped to help us make this tile layout even better.</p>
      </div>
      <div class="item">
        <img src="https://loremflickr.com/300/150?random=12" alt="">
        <h4>Card Title</h4>
        <p>CSS Grid is well equipped to help us make this tile layout even better.</p>
      </div>
      <div class="item">
        <img src="https://loremflickr.com/300/150?random=13" alt="">
        <h4>Card Title</h4>
        <p>CSS Grid is well equipped to help us make this tile layout even better.</p>
      </div>
      <div class="item">
        <img src="https://loremflickr.com/300/150?random=14" alt="">
        <h4>Card Title</h4>
        <p>CSS Grid is well equipped to help us make this tile layout even better.</p>
      </div>
      <div class="item">
        <img src="https://loremflickr.com/300/150?random=15" alt="">
        <h4>Card Title</h4>
        <p>CSS Grid is well equipped to help us make this tile layout even better.</p>
      </div>
      <div class="item">
        <img src="https://loremflickr.com/300/150?random=16" alt="">
        <h4>Card Title</h4>
        <p>CSS Grid is well equipped to help us make this tile layout even better.</p>
      </div>
      <div class="item">
        <img src="https://loremflickr.com/300/150?random=17" alt="">
        <h4>Card Title</h4>
        <p>CSS Grid is well equipped to help us make this tile layout even better.</p>
      </div>
      <div class="item">
        <img src="https://loremflickr.com/300/150?random=18" alt="">
        <h4>Card Title</h4>
        <p>CSS Grid is well equipped to help us make this tile layout even better.</p>
      </div>
      <div class="item">
        <img src="https://loremflickr.com/300/150?random=19" alt="">
        <h4>Card Title</h4>
        <p>CSS Grid is well equipped to help us make this tile layout even better.</p>
      </div>
      <div class="item">
        <img src="https://loremflickr.com/300/150?random=120" alt="">
        <h4>Card Title</h4>
        <p>CSS Grid is well equipped to help us make this tile layout even better.</p>
      </div>
      <div class="item">
        <img src="https://loremflickr.com/300/150?random=121" alt="">
        <h4>Card Title</h4>
        <p>CSS Grid is well equipped to help us make this tile layout even better.</p>
      </div>
      <div class="item">
        <img src="https://loremflickr.com/300/150?random=122" alt="">
        <h4>Card Title</h4>
        <p>CSS Grid is well equipped to help us make this tile layout even better.</p>
      </div>
      <div class="item">
        <img src="https://loremflickr.com/300/150?random=123" alt="">
        <h4>Card Title</h4>
        <p>CSS Grid is well equipped to help us make this tile layout even better.</p>
      </div>
      <div class="item">
        <img src="https://loremflickr.com/300/150?random=124" alt="">
        <h4>Card Title</h4>
        <p>CSS Grid is well equipped to help us make this tile layout even better.</p>
      </div>
      <div class="item">
        <img src="https://loremflickr.com/300/150?random=125" alt="">
        <h4>Card Title</h4>
        <p>CSS Grid is well equipped to help us make this tile layout even better.</p>
      </div>
      <div class="item">
        <img src="https://loremflickr.com/300/150?random=126" alt="">
        <h4>Card Title</h4>
        <p>CSS Grid is well equipped to help us make this tile layout even better.</p>
      </div>
      <div class="item">
        <img src="https://loremflickr.com/300/150?random=127" alt="">
        <h4>Card Title</h4>
        <p>CSS Grid is well equipped to help us make this tile layout even better.</p>
      </div>
      <div class="item">
        <img src="https://loremflickr.com/300/150?random=128" alt="">
        <h4>Card Title</h4>
        <p>CSS Grid is well equipped to help us make this tile layout even better.</p>
      </div>
      <div class="item">
        <img src="https://loremflickr.com/300/150?random=129" alt="">
        <h4>Card Title</h4>
        <p>CSS Grid is well equipped to help us make this tile layout even better.</p>
      </div>
      <div class="item">
        <img src="https://loremflickr.com/300/150?random=130" alt="">
        <h4>Card Title</h4>
        <p>CSS Grid is well equipped to help us make this tile layout even better.</p>
      </div>
      <div class="item">
        <img src="https://loremflickr.com/300/150?random=131" alt="">
        <h4>Card Title</h4>
        <p>CSS Grid is well equipped to help us make this tile layout even better.</p>
      </div>
      <div class="item">
        <img src="https://loremflickr.com/300/150?random=132" alt="">
        <h4>Card Title</h4>
        <p>CSS Grid is well equipped to help us make this tile layout even better.</p>
      </div>
      <div class="item">
        <img src="https://loremflickr.com/300/150?random=123" alt="">
        <h4>Card Title</h4>
        <p>CSS Grid is well equipped to help us make this tile layout even better.</p>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.wrap {
  width: 100vw;
  min-height: 100vh;
  font-family: "Exo", "Bungee Shade", cursive, Arial, sans-serif;
  background-color: #557;
  color: #fff;
  .container {
    width: 100vw;
    min-height: 100vh;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
    gap: 1.5rem;
    padding: 1.5rem;

    .item {
      display: flex;
      justify-content: center;
      padding: 10px;
      flex-direction: column;
      background-color: #f7f7f7;
      box-shadow: 0 0 0 6px rgb(0 0 0 / 13%);
      border-radius: 3px;
      gap: 10px;

      img  {
        aspect-ratio: 16 / 9;
        max-width: 100%;
        min-content: fit-content;
        filter: drop-shadow(1px 1px 2px rgb(255 255 255 / 0.5))
        drop-shadow(-1px -1px 2px rgb(255 255 255 / 0.5));
        mix-blend-mode: luminosity;
        border-radius: 4px 4px 0 0;
      }

      h4 {
        font-size: 1.2rem;
        color: #444;
      }
      p {
        font-weight: 300;
        color: #888;
        line-height: 1.625;
        font-size: 0.8em;
      }
    }
  }
}
</style>
